<template>
  <MainHeader
    title="分类"
    bgUrl="https://jiangeges.oss-cn-heyuan.aliyuncs.com/static/daily-header.webp"
  >
  </MainHeader>
  <Tags :tags="tags" @change-select="changeSelect" />
  <div style="padding: 10px; margin: 0 auto; max-width: 1080px">
    <BlogCard :list="list" :total="total" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import MainHeader from "@/components/MainHeader/index.vue";
import BlogCard from "@/components/BlogCard/index.vue";
import { queryBlogListByParam } from "@/api/blog";
import { onMounted } from "vue";
import { Article } from "@/interface/blogs";
import { tagCategory } from "@/store";
import Tags from "@/components/Tags/index.vue";
import { reactive } from "vue";
interface Tag {
  id: number;
  value: string;
  action?: boolean;
}
interface Tags {
  tagName: string;
  tag: Tag[];
}
const { getCategoryList, getTagList } = tagCategory();
type ArticleAtHere = Article & { showToolTip: boolean };
const actionList = reactive({
  categoryName: "",
  tagName: "",
})
const total = ref<number>(0);
const list = ref<ArticleAtHere[]>();
const category: Tag[] = getCategoryList().map((item: Tag) => {
  item.action = false;
  return item;
});
const tag: Tag[] = getTagList().map((item: Tag) => {
  item.action = false;
  return item;
});
const tags: Tags[] = [
  {
    tagName: "分类",
    tag: category,
  },
  {
    tagName: "标签",
    tag: tag,
  },
];
const changeSelect = (item: any, type:string, action: boolean) => {
  if(type == "分类"){
    actionList.categoryName = action? item.value : "";
  }else{
    actionList.tagName = action? item.value : "";
  }
  getList();
};
const getList = async () => {
  try {
    const res = await queryBlogListByParam({
      categoryName: actionList.categoryName,
      tagNameList: actionList.tagName,
    });
    if (res?.status === 200) {
      total.value = res.data.total;
      list.value = res.data.blog;
    }
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.select-tag {
  border-color: #5379f5;
  filter: brightness(1.1);
  box-shadow: 0px 0px 10px 5px #fa0eab;
}
.tags-title {
  @include flex();
  margin: 0 10px 10px 0;
  width: 3rem;
  span {
    font-weight: 550;
  }
}
.tags {
  max-width: 1080px;
  margin: 12px auto 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .tags-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    .tags-item {
      @include flex();
      cursor: pointer;
      margin: 0 10px 10px 0;
      span {
        color: #ffffff;
        padding: 5px 10px;
        // border: 1px solid;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          border-color: #5379f5;
          filter: brightness(1.1);
          box-shadow: 0 0 10px #4171f8;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
}
@media screen and (min-width: 768px) {
}
h5 {
  color: #f50b16;
}
</style>
